<template>
	<scroll-view scroll-y
     style="height: 100vh;"
     @scrolltolower="onScrollToLower">
	<view class="content">
		<view class="content-item" v-for="( item,index) in dataList" :key="index" @click="toPage(item)">
			<view class="top">订单编号: {{item.orderNo}}</view>
			<view class="Photo-item">
				<view class="photo">
					<image :src="url+item.meal.imagePath.split(',')[0]" mode="" style="width:100%;height:100%;"></image>
				</view>
				<view class="txt">
					<view class="txt-top">
						{{item.meal.setMealName}}
					</view>
					<view class="txt-bottom">
						{{item.meal.packageDescription}}
					</view>
				</view>
			</view>
			<view class="bottom-item"> 
				<view class="bottom">
					{{item.date}}- {{item.startTime}}-{{item.endTime}}
				</view>             
				<view class="info" @click.stop="toSetInfo(item.orderNo,item)">{{'修改预约'}}</view>
			</view>                <!--    new Date(item.endTime) -->
 
		</view>
	     <image  v-if="!dataList.length" src="../../static/images2/empty.png"  style=" position: absolute; left: 50%; transform: translateX(-50%); width: 400rpx; height: 400rpx;"></image>
	</view>
	</scroll-view>
</template>

<script>
	import {baseUrl} from "@/config.js"
		import order from "@/api/order";
	export default {
		data() {
			return {
				dataList: [],
				url:"",
				pageNum:1
			}
		},
		onLoad(){
			uni.$on('update', () => {
				//this.timeData = data.capacityId
				console.log("数据更新")
			    this.already()
			})
		},
	    onShow(){
			 //获取以预约的订单
			 this.url = baseUrl
			 this.already()
		},
		async onPullDownRefresh() {
			        this.pageNum++
			        await this.already()
				    uni.stopPullDownRefresh();
		},
		methods: {
			onScrollToLower(){
				console.log("触底了")
				this.already()
			},
			toPage(item) {
				uni.navigateTo({
					url: `/subPages/testItem/testItem?data=${encodeURIComponent(JSON.stringify(item))}`,
				})
			},
			async already(){
				 //0未付款 1已付款 2已完成 3已退款 4已预约 5已关闭 6完成中
				 const res =  await order.getOrderList({status:4,pageNum:this.pageNum})
				 if(res.total<=this.dataList.length) return 
				 this.dataList = [...this.dataList,...res.rows]  
				 console.log(this.dataList,"已预约订单")
			},
			toSetInfo(orderNo,item){
			 if(new Date().getTime()  < new Date(item.date +' ' + item.endTime).getTime()){
				 uni.navigateTo({
				 	url: `/subPages/infoConfirm/infoConfirm?orderNo=${orderNo}`,
				 })
				 return 
			 }
			 this.$u.toast("已过体检时间不可修改,请等待体检结果")		
			}
		}
	}
</script>

<style scoped>
	.content {
		
		padding: 36rpx;
	}

	.content-item {
		width: 686rpx;
		box-sizing: border-box;
		padding: 20rpx;
		height: 294rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-bottom: 20rpx;
	}

	.top {

		height: 34rpx;

		font-weight: 500;
		font-size: 24rpx;
		color: #333333;

	}

	.Photo-item {
		display: flex;
		margin-top: 10rpx;
	}

	.photo {
		width: 193rpx;
		height: 150rpx;
		background: #F6F6F6;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}

	.txt {
		margin-left: 10rpx;
	}

	.txt-top {
		padding-top: 10rpx;
	}

	.txt-bottom {
		width: 334rpx;
		height: 68rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #626262;
		margin-top: 10rpx;
		text-align: left;
		font-style: normal;
		font-size: 24rpx;
		text-transform: none;
	}

	.info {
		width: 112rpx;
		height: 50rpx;
		margin-top: 20rpx;
		background: #EEF8FF;
		font-size: 24rpx;
		color: #159DFF;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.bottom {
		/* width: 352rpx; */
		height: 42rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #159DFF;
		border: 1rpx solid #159DFF;
		text-align: left;
		font-style: normal;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 28rpx;
		text-transform: none;
		padding: 0 8rpx;
	}

	.bottom-item {
		display: flex;
		color: white;
		justify-content: space-between;
	}
</style>